<template>
    <div class="page-banner">
        <div class="banner-content">
            <h1>{{ title }}</h1>
            <div class="breadcrumb">
                <router-link to="/">首页</router-link>
                <template v-for="(item, index) in breadcrumbs" :key="index">
                    <span class="separator">/</span>
                    <template v-if="item.path">
                        <router-link :to="item.path">{{ item.title }}</router-link>
                    </template>
                    <template v-else>
                        <span class="current">{{ item.title }}</span>
                    </template>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: {
        type: String,
        required: true
    },
    breadcrumbs: {
        type: Array,
        default: () => []
    }
})
</script>

<style lang="scss" scoped>
.page-banner {
    height: 240px;
    width: 100%;
    background: linear-gradient(rgba(74, 96, 161, 0.7), rgba(74, 96, 161, 0.7)), url('@/assets/images/page-banner.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 132px;
    
    .banner-content {
        text-align: center;
        color: #fff;
        
        h1 {
            font-size: 48px;
            font-weight: 600;
            margin-bottom: 16px;
        }
        
        .breadcrumb {
            font-size: 16px;
            
            a {
                color: #fff;
                text-decoration: none;
                
                &:hover {
                    opacity: 0.8;
                }
            }
            
            .separator {
                margin: 0 8px;
                opacity: 0.8;
            }
            
            .current {
                opacity: 0.8;
            }
        }
    }
}
</style> 